<template>
	<div class="book-detail-bottom">
		<div select>
			<el-radio-group v-model="select" style="book-radio">
				<el-radio-button v-model="select" label="图书介绍" style="opacity: 0.9;"></el-radio-button>
				<el-radio-button v-model="select" label="图书评价" style="opacity: 0.9;"></el-radio-button>
				<el-radio-button v-model="select" label="图书问答" style="opacity: 0.9;"></el-radio-button>
			</el-radio-group>
		</div>
		<div content>
			<div v-if="select == '图书介绍'">
				{{ book.detail }}
			</div>
			<div v-else-if="select == '图书评价'" class="comments">
				<ul>
					<li class="no-style" v-for="comment in comments" :key="comment.id">
						<div username>{{ comment.username }}</div>
						<div comment>{{ comment.content }}</div>
						<div time>{{ comment.commentDate }}</div>
					</li>
				</ul>
				<h2 v-if="comments.length == 0">没有评论哦，快来成为第一个仙人！</h2>
			</div>
			<div v-else-if="select == '图书问答'" class="text-center">
				<h1>暂无</h1>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				select: '图书介绍',
			}
		},
		props: ['comments','book']
	}
</script>

<style lang="less">
	//下半部分
	.book-detail-bottom {
		margin-top: 1rem;
		margin-bottom: 10%;
		border: solid rgba(255,255,255,.5) 1px;
		background-color: rgba(255,255,255,.3);
		
		// [select] {
			
		// }
		[content] {
			padding: 0 3rem;
			margin-top: 3%;
			margin-bottom: 3%;
			min-height: 30px;
		}
		
		.comments {
			font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
			
			[username] {
				font-size: 14px;
				line-height: 36px;
			}
			// [comment] {
				
			// }
			[time] {
				font-size: 12px;
				color: #99a2aa;
				line-height: 36px;
			}
			li {
				border-top: 1px solid #e5e9ef;
			}
		}
	}
</style>
